import {Component} from 'react';
import './Nav.css'
import bus from '../../utils/bus';
export default class MyNav  extends Component {
        state = {
            navList:["所有任务","已完成","未完成"],
            activeIndex:0,
            value:""
        }
        render() {
            let {navList,activeIndex} = this.state;
            return (
                <div className='nav'>
                   <div className='navList'>
                   {
                    navList.map((item,index)=>{
                        return <div key={index} className={activeIndex===index?'active':''} onClick={()=>{
                            this.setState({
                                activeIndex:index
                            })
                            // 发布事件
                            bus.emit("getIndex",index)
                        }}>{item}</div>
                    })
                   }
                   </div>
                   <div>
                    <input type="text" value={this.state.value} onChange={(e)=>{
                        this.setState({
                            value:e.target.value
                        })
                    }}/> <button onClick={()=>{
                        bus.emit("getValue",{name:this.state.value,state:false})
                        this.setState({
                            value:""
                        })
                    }}>添加</button>
                   </div>
                </div>
            )
        }
    }